<template>
	<movable-area class="sliderBar">
		<movable-view class="slider" :style="{'--color': selectedColor}" :x="x" direction="horizontal"
			@change="onChange($event)"></movable-view>
	</movable-area>
</template>

<script>
	export default {
		props: {
			selectedColor: {
				type: String,
				default: 'hsl(0, 100%, 50%)'
			},
			min: {
				type: Number,
				default: 0
			},
			max: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				slideBarWidth: 0,
				minScore: this.min,
				maxScore: this.max,
				x: 0,
				score: 0,
				color: '',
			};
		},
		mounted() {
			var that = this;
			this.$nextTick(() => {
				uni.createSelectorQuery().select(".sliderBar").boundingClientRect(function(res) {
					that.slideBarWidth = res.width
				}).exec();
			})
		},
		methods: {
			onChange(e) {
				this.x = e.detail.x
				// 进度值换算
				this.score = Math.round(e.detail.x / this.slideBarWidth * (this.maxScore - this.minScore) + this.minScore)
				// 颜色值换算
				//var changeColor = parseInt(360 / (this.maxScore - this.minScore) * (this.score - this.minScore))
				this.color = "#" + this.score.toString(16).padStart(6, '0');
				//this.color = 'hsl('+changeColor+', 100%, 50%)'
				this.$emit('getScore', this.score)
				this.$emit('getColor', this.color)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sliderBar {
		position: relative;
		z-index: 99;
		width: 100%;

		&::after {
			content: '';
			position: absolute;
			left: 0;
			width: 100%;
			height: 8px;
			border-radius: 4px;
			background: linear-gradient(90deg,
					hsl(0, 100%, 50%) 0%,
					hsl(36, 100%, 50%) 10%,
					hsl(72, 100%, 50%) 20%,
					hsl(108, 100%, 50%) 30%,
					hsl(144, 100%, 50%) 40%,
					hsl(180, 100%, 50%) 50%,
					hsl(216, 100%, 50%) 60%,
					hsl(252, 100%, 50%) 70%,
					hsl(288, 100%, 50%) 80%,
					hsl(324, 100%, 50%) 90%,
					hsl(360, 100%, 50%) 100%, );
		}

		.slider {
			position: relative;
			z-index: 100;
			width: 0px;
			height: 0px;

			&::after {
				content: '';
				position: absolute;
				top: -24px;
				border-radius: 50%;
				background-color: var(--color);
				width: 30px;
				height: 60rpx;
				transform: translatex(-50%);
				border: 3px solid white;
			}
		}
	}
</style>